<!-- eslint-disable vue/multi-word-component-names -->
<!-- @Author ： NWJ
     Version ： 1.0 -->

<style scoped>
/* 保持原有样式不变 */
.main-content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  gap: 10px;
  width: calc(100vw - 120px);
  height: calc(100vh - 80px);
  background-color: #000;
  padding: 10px;
}
.box {
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
}
#diyige {
  grid-area: 1 / 1 / 8 / 6;
}
#dierge {
  grid-area: 1 / 6 / 8 / 13;
}
#disange {
  grid-area: 8 / 1 / 13 / 13;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.warning {
  padding: 10px;
  margin-top: 40px;
  width: 100%;
  height: 160px;
}
</style>

<template>
  <div class="main-content">
    <span id="diyige" class="box">
      <NightingaleChart :data="chartData" :name="name" />
    </span>
    <span id="dierge" class="box">
      <SetMaxVal :data="[this.currentTemp, this.currentHumi, this.currentMq]"
          @dataChange="onGetAlarmRecordData"></SetMaxVal>
      <div class="warning">
        <el-table
          :data="alarmRecords"
          style="width: 100%; height: 100%"
          stripe
          border
          size="medium"
          :header-cell-style="{
            background: '#f5f7fa',
            color: '#303133',
            fontWeight: 'bold'
          }"
          :row-style="{
            height: '50px'
          }"
          :cell-style="{
            color: '#606266'
          }"
        >
  <el-table-column
    prop="type"
    label="报警类型"
    width="222"
    align="center"
  >
    <template #default="scope">
      <el-tag
        :type="getTagType(scope.row.type)"
        effect="light"
        size="medium"
      >
        {{ scope.row.type }}
      </el-tag>
    </template>
  </el-table-column>
  <el-table-column
    prop="current_value"
    label="实时数值"
    width="121"
    align="center"
  />
  <el-table-column
    prop="current_max"
    label="实时阈值"
    width="200"
    align="center"
  />
  <el-table-column
    prop="createdAt"
    label="报警时间"
    width="201"
    align="center"
  />
</el-table>
      </div>
    </span>
    <span id="disange" class="box">
      <TempChart :value="currentTemp"></TempChart>
      <HumiChart :value="currentHumi"></HumiChart>
      <AirChart :value="currentMq"></AirChart>
    </span>
  </div>
</template>

<script>
import axios from 'axios'
import NightingaleChart from '@/echarts/NightingaleChart'
import { generateAuthorization } from '@/utils/getOnenetAuth'
import formatDateTime from '@/utils/getLocalDateTime'
import SetMaxVal from '@/components/SetMaxVal'
import TempChart from '@/components/TempChart'
import HumiChart from '@/components/HumiChart'
import AirChart from '@/components/AirChart'

export default {
  components: {
    NightingaleChart,
    TempChart,
    HumiChart,
    AirChart,
    SetMaxVal
  },
  data()
  {
    return {
      name: '用户来源统计',
      ontnetAuth: '',
      currentTemp: 20,
      currentHumi: 20,
      currentMq: 20,
      alarmRecords: [],
      chartData: [
        { value: 40, name: '计算机科学与信息工程学院' },
        { value: 38, name: '土建与交通工程学院' },
        { value: 32, name: '外国语学院' },
        { value: 30, name: '商学院' },
        { value: 28, name: '电子电气与无人机学院' },
        { value: 26, name: '机械与航空制造工程学院' },
        { value: 22, name: '生物与食品工程学院' },
        { value: 22, name: '数学与信息科学学院' },
        { value: 22, name: '体育教学部' },
        { value: 22, name: '化学与环境工程学院' },
        { value: 22, name: '飞行学院' },
        { value: 22, name: '马克思主义学院' },
        { value: 22, name: '继续教育学院' },
        { value: 22, name: '公共艺术教育教学部' },
        { value: 22, name: '材料科学与工程学院' },
        { value: 22, name: '会计学院' },
        { value: 22, name: '艺术设计学院' },
        { value: 22, name: '莫斯科航空科技学院' },
        { value: 22, name: '洹滨校区、明德书院' },
        { value: 18, name: '文化传媒与航空服务学院' }
      ],
      intervalId: null // 新增定时器ID存储
    }
  },
  mounted()
  {
    this.onGetHardwareData()
    this.onGetAlarmRecordData()
    this.ontnetAuth = generateAuthorization()
    this.intervalId = setInterval(() =>
    {
      this.onGetHardwareData()
    }, 1600)
  },
  beforeUnmount()
  {
    // 组件销毁前清除定时器
    if (this.intervalId)
    
      clearInterval(this.intervalId)
  },
  methods: {
    getTagType(type)
    {
      switch (type)
      {
      case '温度过高':
        return 'danger'  // 红色
      case '湿度过高':
        return 'primary' // 橙色
      case '浓度过高':
        return 'warning'    // 灰色
      default:
        return ''        // 默认样式
      }
    },
    onGetHardwareData()
    {
      axios.get('http://iot-api.heclouds.com/thingmodel/query-device-property', {
        params: {
          product_id: '0P98hF3P5y',
          device_name: 'TEST'
        },
        headers: {
          Authorization: 'version=2022-05-01&res=userid%2F428375&et=1744091532&method=sha1&sign=arbxq%2FEvGB7r6vVWuYLpAwlm2XA%3D',
          'Content-Type': 'application/json',
          'X-Requested-With': 'XMLHttpRequest',
          Accept: 'application/vnd.iot.v1+json'
        }
      })
        .then(res =>
        {
          if (res.data.data !== null)
          {
            for (let i = 0; i < res.data.data.length; i++)
            {
              const item = res.data.data[i]
              if (item.identifier === 'temp')
                this.currentTemp = item.value
              else if (item.identifier === 'humi')
                this.currentHumi = item.value
              else if (item.identifier === 'mq')
                this.currentMq = item.value
            }
          }
        })
        .catch(error => console.error(error))
    },

    onGetAlarmRecordData()
    {
      axios.get('/node/ar/all')
        .then(res =>
        {
          this.alarmRecords = res.data.msg
          res.data.msg.map(item =>
          {
            item.createdAt = formatDateTime(item.createdAt)
            return item
          })
          this.alarmRecords = res.data.msg
        })
    }
  }
}
</script>
